<template>
  <div>
    <div class="login_header">
      <i class="iconfont icon-fanhui hui"></i>
      <i class="iconfont icon-lingdang dang"></i>
    </div>

    <div class="login">
        <h1>豆果登录</h1>
        <div class="form">
            <div class="item">
                <span class="iconfont icon-icon_mobile"></span>
                <input type="text" placeholder="手机号码" v-model="phone">
            </div>
            <div class="item">
                <span class="iconfont icon-mima"></span>
                <input type="password" placeholder="密码" v-model="password">
            </div>
            <div class="item" style="border:0px;margin-top:50px;">
                <div class="submit" style="background-color:#FFC533;line-height:40px" @click="submit">提交</div>
            </div>
        </div>
    </div>

    <div class="other">
      <h5>其他登录方式</h5>
      <ul>
        <li class="iconfont icon-weixin1" style="color:#48D226"></li>
        <li class="iconfont icon-QQ" style="color:#45ADFB"></li>
        <li class="iconfont icon-weibo" style="color:#F66245"></li>
        <li class="iconfont icon-denglushoujidenglu" style="color:#45ADFB"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {

  data(){
        return {
            phone:"",
            password:"",
            token:"45614561da5s1d5sad564q56w1d5s3ad",
            accountid:121321566486
        }
    },
      methods:{
        submit(){
         let regCode = 18172564060;
         let regPassword = 123456;
         if(this.phone == regCode && this.password == regPassword){
            Toast("登陆成功");
            window.localStorage.setItem("token",this.token);
            window.localStorage.setItem("uid",this.accountid);
            
            //登陆成功跳回个人中心页面
            
            this.$router.push("/recommend");
         }else{
           Toast("请填写正确信息");
         }
        }
      }

}
</script>

<style lang="less">
  .login_header{
    margin-top: 38px;
    display: flex;
    justify-content: space-between;
    .hui{
      margin-left: 23px;
      font-size: 20px;
    }
    .dang{
      margin-right: 23px;
      font-size: 24px;
    }
  }

.login{
       
        width: 100%;
        height: 100%;
        color:black;
    }
    h1{
        font-size: 48px;
        text-align: center;
        height: 48px;
        padding:100px 0 40px 0;
    }
    .form{
        .item{
            width: 76%;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            
            border-bottom: 1px solid #808080;
            margin-bottom: 12px;
            input{
                background-color: transparent;
                border:0px;
                outline: none;
                text-indent: 0.5em;
                font-size: 14px;
                color:black;
            }
            span{
                font-size: 20px;
                margin-left: 10px;
                display: inline-block;
                vertical-align: middle;
            }
            .getCode{
                border:1px solid #fff;
                height: 20px;
                line-height: 20px;
                width: 50px;
                border-radius: 20px;
                font-size: 12px;
                color:#808080;
                float: right;
                margin:5px;
            }
            .submit{
                font-size: 15px;
                background-color: #fff;
                text-align: center;
                border-radius: 20px;
                border: 0px ;
            }
        }
    }
    

    .other{
      margin-left: 25px;
      margin-top: 40px;
      h5{
        font-size: 12px;
        color: #909090;
      }
      ul{
        margin-top: 25px;
        display: flex;
        li{
          font-size: 30px;
          margin-right: 24px;
        }
      }
    }
</style>